<template>
	<view class="file_content" v-if="fileShow">
		<view class="file_box">
			<view class="contract-img" v-if="file.pdf_images.length>0">
				<image class="contract_img" mode="widthFix" v-for="(v,i) in file.pdf_images" :src="v.url" :key="i"
					alt="">
				</image>
				<view v-for="(v,i) in file.set_data" :key="i"
					:style="'position:absolute;border: 1px dashed rgb(45, 140, 240);background: rgba(234, 241, 255, 0.9);font-size: 22rpx;text-align:center;width:'+pxToRpx(v.width)+'rpx;line-height:'+pxToRpx(v.height)+'rpx;height:'+pxToRpx(v.height)+'rpx;left:'+pxToRpx(v.x)+'rpx;top:'+pxToRpx(v.y)+'rpx;'"
					@click="operate(v.type,i,v.sign)">
					<text v-if="v.type=='image'||v.type=='area'">{{ !v.content ? v.text : '' }}</text>
					<text v-else>{{ v.content ? v.content : v.text }}</text>
					<image mode="aspectFit" class="uploadImg" v-if="(v.type=='image'||v.type=='area')&&v.content"
						:src="v.content.url" alt=""></image>
				</view>
			</view>
			<u-modal :show="control.textShow" :showCancelButton="true" :title="control.title"
				@cancel="control.textShow = false;" @confirm="inputConfirm">
				<u--input placeholder="请输入内容" :type="control.inputType" v-model="control.text" border="surround"
					clearable></u--input>
			</u-modal>
			<u-datetime-picker :show="control.dateShow" v-model="control.date" mode="date"
				@cancel="control.dateShow = false;" @confirm="dateConfirm"></u-datetime-picker>
			<view class="signature" v-if="control.signaShow">
				<signa-ture @getImg="getImg" @close="control.signaShow = false"></signa-ture>
			</view>
		</view>
		<view class="flex bottom-button">
			<u-button type="error" :plain="true" text="取消" class="custom-style" @click="fileShow = false" iconColor=""
				:customStyle="{borderRadius:'0rpx',border:'none',borderTop:'1rpx solid #f56c6c',padding:'0',height:'auto'}"></u-button>
			<u-button type="primary" text="签署完成" class="custom-style" @click="fileSign"
				:customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
		</view>
	</view>
</template>
<script setup>
	import SignaTure from "@/components/signature.vue";
	import {
		ref,
		reactive,
		defineEmits
	} from 'vue';
	import {
		goNav,
		msg,
		timestampToDateFormat,
		upload
	} from "@/utils/common";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	const emit = defineEmits(['return-data']);
	const file = ref([]);
	const fileShow = ref(false);
	const signerType = ref('');
	const control = ref({
		index: '',
		i: '',
		textShow: false,
		dateShow: false,
		signaShow: false,
		title: '',
		text: '',
		date: '',
		inputType: 'text'
	})
	onLoad(() => {})
	onShow(() => {})
	const pxToRpx = (px) => {
		let scale = uni.upx2px(100) / 100;
		// const scale_ = parseFloat((600 / (uni.getSystemInfoSync().screenWidth - uni.upx2px(64))).toFixed(2));
		const scale_ = parseFloat((600 / (uni.getSystemInfoSync().screenWidth)).toFixed(2));
		return (px / scale_) / scale
	}
	const operate = (type, i, userType) => {
		if (userType != signerType.value) {
			return;
		}
		control.value.i = i;
		switch (type) {
			case 'area':
				control.value.signaShow = true;
				break;
			case 'date':
				control.value.date = '';
				if (file.value.set_data[i].content) {
					control.value.date = file.value.set_data[i].content;
				}
				control.value.dateShow = true;
				break;
			case 'text':
				control.value.text = '';
				if (file.value.set_data[i].content) {
					control.value.text = file.value.set_data[i].content;
				}
				control.value.title = '文本';
				control.value.inputType = 'text';
				control.value.textShow = true;
				break;
			case 'number':
				control.value.text = '';
				if (file.value.set_data[i].content) {
					control.value.text = file.value.set_data[i].content;
				}
				control.value.title = '数字';
				control.value.inputType = 'number';
				control.value.textShow = true;
				break;
			case 'image':
				uni.chooseImage({
					count: 1,
					success: function(res) {
						uploadFile(res.tempFilePaths[0])
					}
				});
				break;
			default:
				break;
		}
	}
	const getImg = (e) => {
		uploadFile(e)
		control.value.signaShow = false
	}
	const uploadFile = (url) => {
		const tempArr = url.split('.');
		const tempPathArr = url.split('/');
		const tempExt = tempArr[tempArr.length - 1];
		const tempName = tempPathArr[tempPathArr.length - 1];
		upload({
			tempName: tempName,
			tempPath: url,
			tempExt: tempExt,
		}, function(response) {
			file.value.set_data[control.value.i].content = {
				id: response.id,
				url: response.res.url
			}
			// emit('return-data', file.value);
		});
	}
	const inputConfirm = () => {
		if (!control.value.text) {
			msg('请输入内容');
			return;
		}
		file.value.set_data[control.value.i].content = control.value.text;
		control.value.textShow = false;
		// emit('return-data', file.value);
	}
	const dateConfirm = () => {
		setTimeout(() => {
			file.value.set_data[control.value.i].content = timestampToDateFormat(control.value.date);
			control.value.dateShow = false;
			// emit('return-data', file.value);
		}, 200)
	}
	const fileSign = () => {
		emit('return-data', {
			file: file.value,
			index: control.value.index
		});
		fileShow.value = false;
	}
	const init = (json, index, type) => {
		console.log(json)
		file.value = json;
		control.value.index = index;
		fileShow.value = true;
		signerType.value = type
	}
	defineExpose({
		init
	});
</script>
<style lang="scss" scoped>
	.file_content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background-color: #fff;

		.file_box {
			padding-bottom: 88rpx;
			width: 100%;
			height: 100%;
			overflow-y: auto
		}
	}

	.contract-img {
		width: 100%;
		position: relative;

		.contract_img {
			width: 100%;
		}

		.uploadImg {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.signature {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 9999;
		background-color: #fff;
	}

	.bottom-button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 88rpx;

		.custom-style {
			width: 50%;
		}
	}
</style>